<template>
  <div @click='goDetail' class="item">
    <img key="item.img" v-lazy="item.img" alt="" />
    <span>{{ item.tit }}</span> 
  </div>  
</template>

<script>
export default {
  name: 'ImgItem',
  // props 上挂载的东西都会自动绑定到 this 上
  props: ['item'],
  methods: {
    // 点击跳转详情页
    goDetail() {
      this.$router.push(`/detail/${this.item.id}`);
    }
  }
}
</script>

<style lang='scss' scoped>
.item {
    width: calc(100% - 20px);
    height: 120px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    border-bottom: solid 1px #ccc;
    img {
      display: inline-block;
      width: 100px;
      height: 100px;
    }
  }
</style>
